<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <input type="text" placeholder="请输入聊天内容" />
      <button id="btn1">发送消息</button>
      <button id="btn2">退出聊天室</button>
      <div class="content"></div>
    </div>

    <script>
      let content = document.querySelector('.content')

      // 1.与服务器进行WebSocket链接
      // wss://echo.websocket.org : 这个接口你给它发什么，它就回复你什么
      const ws = new WebSocket('wss://echo.websocket.org') // 建立与服务端地址的连接

      // 2.连接成功回调
      ws.onopen = function () {
        // 如果执行此函数 表示与服务器建立关系成功
        content.innerHTML += '提示：<p style="color:red">websockt链接成功</p>'
      }

      //3.发送消息
      document.querySelector('#btn1').onclick = function () {
        console.log(1111)

        let msg = document.querySelector('input').value
        // 发送消息
        ws.send(msg)
        //渲染页面
        content.innerHTML += `用户：${msg} <br>`
      }

      //4.接收消息
      ws.onmessage = function (event) {
        // event中的data就是服务器发过来的消息
        console.log(event);
        
        content.innerHTML += `服务器：${event.data} <br>`
      }

      //5.关闭连接
      document.querySelector('#btn2').onclick = function () {
        ws.close()
      }

      //6.成功关闭链接回调
      ws.onclose = function () {
        // 关闭连接成功
        content.innerHTML += '提示：<p style="color:red">websockt关闭成功</p>'
      }
    </script>
  </body>
</html>
